<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 董灌磊
  Date: 2024/4/13
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
</head>
<body>
<table id="departTable" lay-filter="plotTables"  class="layui-table layui-table-hover"></table>
<%--添加页面--%>
<div id="add" style="display:none;padding:20px">
    <form class="layui-form" id="addForm" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">请输入部门:</label>
            <div class="layui-input-block">
                <input type="text" name="departname" required  class="layui-input">
            </div>
        </div>
    </form>
</div>
<%--头部工具栏，添加--%>
<script type="text/html" id="headTool">
    <button class="layui-btn" onclick="add()">添加部门</button>
</script>
</body>
<script>
    let $=layui.$
    layui.use(function (){
        let table=layui.table;
        table.render({
            id:"one",
            elem:"#departTable",
            url:"/teammanager/depart/show",
            toolbar: "#headTool",
            cols:[[
                {field:'id',align: 'center',title:"序号"},
                {field:'departname',align: 'center',title:"部门名称"}
            ]]
        })
    })
    //点击添加
    function add(){
        layui.layer.open({
            type : 1,
            title : "提示",
            area:["500px","400px"],
            content: $("#add"),
            icon : 3,
            btn:["确定","取消"],
            yes(){
                //通过表单序列化，获取输入的内容
                let addForm = layui.form.val("addForm");
                console.log(addForm);
                //发送ajax请求
                $.post("/teammanager/depart/add",addForm)
                    .then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    });
            }
        });
    }
</script>
</html>
